<template>
  <div style="display: flex; flex-direction: column; height: 100%; flex: 1">
    <!-- <h3 class="title_sy" v-if="typeVal == 1">平台设置</h3>
    <h3 class="title_sy" v-else>系统管理</h3> -->
    <el-container class="container">
      <el-aside width="200px">
        <div class="menu_card">
          <ul class="ul_menu">
            <p>管理后台</p>
            <!-- <li class="li_menu" :class="{ is_li_menu: typeVal == 1 }" @click="onchange(1)">
              <el-icon class="icon">
                <SetUp />
              </el-icon>
              配额概览
            </li> -->
            <li class="li_menu" :class="{ is_li_menu: typeVal == 2 }" @click="onchange(2)">
              <el-icon class="icon">
                <OfficeBuilding />
              </el-icon>
              企业信息
            </li>
            <li class="li_menu" :class="{ is_li_menu: typeVal == 3 }" @click="onchange(3)">
              <el-icon class="icon">
                <Setting />
              </el-icon>
              全局设置
            </li>
            <!-- <li class="li_menu" :class="{ is_li_menu: typeVal == 4 }" @click="onchange(4)">
              <el-icon class="icon">
                <Coin />
              </el-icon>
              全部应用
            </li> -->
            <!-- <li class="li_menu" :class="{ is_li_menu: typeVal == 5 }" @click="onchange(5)">
              <el-icon class="icon">
                <User />
              </el-icon>
              关于我们
            </li> -->
            <!-- <li>
              <el-popover placement="right" :width="180" trigger="click" :offset="16">
                <template #default>
                  <HelpCenter></HelpCenter>
                </template>
<template #reference>
                  <div class="li_menu">
                    <el-icon class="icon">
                      <Warning />
                    </el-icon>
                    帮助中心
                    <el-icon class="icon_o">
                      <ArrowRight />
                    </el-icon>
                  </div>
                </template>
</el-popover>
</li> -->
            <!-- <p>订单管理</p>
            <li class="li_menu" :class="{ is_li_menu: typeVal == 6 }" @click="onchange(6)">
              <el-icon class="icon">
                <Notebook />
              </el-icon>
              账单明细
            </li> -->
          </ul>
        </div>
      </el-aside>
      <el-main>
        <!-- 配额概览 -->
        <!-- <QuotaOverview v-if="typeVal == 1"></QuotaOverview> -->

        <!-- 企业信息 -->
        <EnterpriseInformation v-if="typeVal == 2"></EnterpriseInformation>

        <!-- 全局设置 -->
        <GlobalSetting v-if="typeVal == 3"></GlobalSetting>

        <!-- 全部应用 -->
        <FullApplication v-if="typeVal == 4"></FullApplication>

        <!-- 账单明细 -->
        <BillingDetails v-if="typeVal == 6"></BillingDetails>
      </el-main>
    </el-container>
  </div>
</template>

<script setup lang="ts">
  import FullApplication from './components/fullApplication/index.vue'
  import EnterpriseInformation from './components/information/index.vue'
  import GlobalSetting from './components/globalSetting/index.vue'
  import BillingDetails from './components/billingDetails/index.vue'
  import { Setting, OfficeBuilding } from '@element-plus/icons-vue'
  import { ref, watch } from 'vue'
  import { useRoute, useRouter } from 'vue-router'
  import pageComponentName from '@/config/page-component-name'

  defineOptions({
    name: pageComponentName.setting.platformSet,
  })

  const route = useRoute()
  const router = useRouter()
  const typeVal = ref(route.query.typeVal ? route.query.typeVal : 2)
  const onchange = (val) => {
    if (val == typeVal.value) return
    router.push({ path: '/basedata/platform', query: { typeVal: val } })
    typeVal.value = val
  }
  watch(
    () => route.path,
    () => {
      typeVal.value = route.query.typeVal ? route.query.typeVal : 2
    },
  )
</script>

<style scoped lang="scss">
  @import './index';
</style>
